import React from 'react'
import { Button,Card,notification} from "antd";
import './ui.less'
// notification

export default class Notice extends React.Component{
    constructor(){
        super()
        this.state={
        }
    }

    
    openNotification = (type,direction) =>{
        //如果有方向的参数的设置
        if(direction){
            notification.config({
                //出现的方向
                placement:direction
            })
        }
        //通用设置消息提醒标题和内容
        notification[type]({ 
            message:"发钱了",
            description:"提示框相关描述"
        })
    }
    render(){
        return (
            <div>
                <Card title="通知提醒" className="cardbox">
                    {/* 传参必须用箭头函数()=> 不然报错,箭头函数点击时候才触发,不用箭头函数一进来就触发*/}
                    <Button type="primary" onClick={()=>this.openNotification("success")}>Success</Button>
                    <Button type="primary" onClick={()=>this.openNotification("info")}>Info</Button>
                    <Button type="primary" onClick={()=>this.openNotification("warning")}>Warning</Button>
                    <Button type="primary" onClick={()=>this.openNotification("error")}>Error</Button>
                </Card>

                <Card title="通知提醒" className="cardbox">
                    {/* 传参必须用箭头函数()=> 不然报错,箭头函数点击时候才触发,不用箭头函数一进来就触发*/}
                    <Button type="primary" onClick={()=>this.openNotification("success","topLeft")}>左上角</Button>
                    <Button type="primary" onClick={()=>this.openNotification("info","topRight")}>右上角</Button>
                    <Button type="primary" onClick={()=>this.openNotification("warning","bottomLeft")}>左下角</Button>
                    <Button type="primary" onClick={()=>this.openNotification("error","bottomRight")}>右下角</Button>
                </Card>
               

                
            </div>
        )
    }
}